import React from 'react';
import { Card,WingBlank, WhiteSpace,Button  } from 'antd-mobile';
import Notice from '../../components/Notice/Notice'
import './Home.scss'
 export default  function Home(props){
      function Link(url){
         props.history.push(url)
      }
      const data = [{
        title:'长列表（类）',
        extra:'antMobile',
        body:'引入上拉加载，下拉刷新，代码进行注释，比官方示例更容易看懂',
        url:'/list'
      },{
        title:'长列表(HOOk)',
        extra:'antMobile',
        body:'引入上拉加载，下拉刷新，代码进行注释，比官方示例更容易看懂',
        url:'/listHook'
      },{
        title:'路由嵌套',
        extra:'react-router-dom',
        body:'{props.children}类似于VUE中的<router-view>',
        url:'/routerList'
      },{
        title:'父子组件传值',
        extra:'react',
        body:'演示父子组件传值及事件传递',
        url:'/reactView'
      },{
        title:'Context上下文',
        extra:'react',
        body:'演示从父组件传值到孙组件，无需多获取props,利用上下文context进行传值',
        url:'/context'
      },{
        title:'css模块化',
        extra:'cssmodules',
        body:'演示如何使用cssmodules进行样式的模块化',
        url:'/cssmodules'
      },{
        title:'骨架屏加载',
        extra:'react-content-loader',
        body:'演示如何使用react-content-loader进行骨架屏加载',
        url:'/skeleton'
      }]
      return(
        <WingBlank size="lg">
        <WhiteSpace size="lg" />
            <Notice></Notice>
            {
              data.map((i,k)=>{
                 return(
                    <Card style={{'marginBottom':'20px',marginTop:'10px'}} key={k}>
                      <Card>
                        <Card.Header
                          title={i.title}
                          thumbStyle={{'width':'40px','height':'40px'}}
                          thumb={require('../../static/images/logo.png')}
                          extra={<span>{i.extra}</span>}
                        />
                        <Card.Body>
                          <div style={{'lineHeight':'24px'}}>{i.body}</div>
                        </Card.Body>
                      </Card>
                      <Card.Footer  extra={
                              <div style={{'margin':'8px 0 4px 0'}}>
                                <Button onClick={()=>{Link(i.url)}} type="primary" icon="check-circle-o" inline size="small">查看示例</Button>
                              </div>
                            } />
                  </Card>

                 )   
              })
            }
            <WhiteSpace size="lg" />
      </WingBlank>
      )
  }